<load target="js/counter_admin.js" usecdn="true" />
<load target="counter.css" usecdn="true" />

<!--// datepicker javascript plugin load -->
<!--%load_js_plugin("ui.datepicker")-->

<script type="text/javascript">
    function moveDate() {
		document.forms['calendar'].submit();
        return true;
    }
</script>
<h3 class="h3">{$lang->counter} {$lang->cmd_management}</h3>
<form action="./index.php" method="get" name="calendar" id="fo_calendar">
    <input type="hidden" name="module" value="{$module}" />
    <input type="hidden" name="act" value="{$act}" />
    <input type="hidden" name="selected_date" id="selected_date" value="{zDate('Ymd',$selected_date)}" />
	<div class="table">
		<table width="100%" border="1" cellspacing="0">
			<thead>
			<tr>
				<th scope="row">{$lang->total_counter}</th>
				<th scope="row"> <span id="str_selected_date">{zdate($selected_date, "Y-m-d")}</span>
						<input type="hidden" class="inputDate" value="{zdate($selected_date,'Y-m-d')}" />
<script type="text/javascript">
	(function($){
		$(function(){
			var option = {
				changeMonth: true
				,changeYear: true
				,gotoCurrent: false
				,dateFormat:'yy-mm-dd'
				,yearRange:'-100:+10'
				,showOn:"button"
				,buttonImage:"./modules/counter/tpl/images/buttonCalendar.gif"
				,buttonImageOnly:true
				,mandatory:true
				,onSelect:function(){
					$("#str_selected_date").html(this.value);
					$("#selected_date").val(this.value.replace(/-/g,''));
					moveDate();
				}
			};
	
			$.extend(option,$.datepicker.regional['{$lang_type}']);
			$(".inputDate").datepicker(option);
		});
	})(jQuery);
</script>				</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>Visitor <strong>{number_format($total_counter->unique_visitor)}</strong> &nbsp;/&nbsp; Pageview : <strong>{number_format($total_counter->pageview)}</strong></td>
				<td>Visitor : <strong>{number_format($selected_day_counter->unique_visitor)}</strong> &nbsp;/&nbsp; Pageview : <strong>{number_format($selected_day_counter->pageview)}</strong></td>
			</tr>
			</tbody>
			</table>
	</div>
    </form>
	<div class="cnb">
		<ul>
			<!--@foreach($lang->cmd_select_counter_type as $key => $val)-->
			<li <!--@if($type==$key || (!$type && $key == "hour"))-->class="active"<!--@end-->><a href="{getUrl('type',$key)}">{$val}</a></li>
			<!--@end-->
		</ul>
	</div>


<!-- 일자를 옮기는 form -->
<form action="./" method="get" id="fo_counter">
    <input type="hidden" name="module" value="{$module}" />
    <input type="hidden" name="act" value="{$act}" />
    <input type="hidden" name="selected_date" value="{$selected_date}" />
</form>


<!-- unique visitor 그래프 -->
<div class="table">
	<table width="100%" border="1" cellspacing="0">
	<!--@foreach($detail_status->list as $key => $val)-->
		<!--@if($detail_status->sum>0)-->
			{@$percent   = sprintf("%0.2f", $val / $detail_status->sum * 100 )}
			{@$img_width = sprintf("%d", $val / $detail_status->max * 100 )}
		<!--@else-->
			{@$percent = 0}
			{@$img_width = 1}
		<!--@end-->
	<tr>
		<!--@if(Context::getLangType()=='en')-->
		<th scope="row"> <!--// 시간대별 -->
			<!--@if($type == 'year')-->
				<em>{$key}</em>
			<!--@elseif($type == 'month')-->
				<em>{$key}</em>
			<!--@elseif($type == 'day')-->
				<em>{$key}</em> {$lang->unit_day}
			<!--@else-->
				<em>{$key}</em>
			<!--@end-->			</th>
		<!--@else-->
		<th scope="row"> <!--// 시간대별 -->
			<!--@if($type == 'year')-->
				<em>{$key}</em> {$lang->unit_year}
			<!--@elseif($type == 'month')-->
				<em>{$key}</em> {$lang->unit_month}
			<!--@elseif($type == 'day')-->
				<em>{$key}</em> {$lang->unit_day}
			<!--@else-->
				<em>{$key}</em> {$lang->unit_hour}
			<!--@end-->			</th>
		<!--@end-->
		{@ $img_width = (int)$percent; $img_width = $img_width?$img_width.'%':'3px'; }
		<td >
			<div class="barContainer">
				<span class="graphHr" style="width:{$img_width}">
					<span>{number_format($val)}({$percent}%)</span>
				</span>
			</div>
		</td>
	</tr>
	<!--@end-->
	</table>
</div>
